<template>
  <div>
    <Row :gutter="16">
      <Col span="12">
        <Table border size="small" :columns="tableColumns" :data="tableData">
          <template slot-scope="{ row }" slot="name">
            <strong>
              <Icon type="ios-paper"/>
              {{ row.name }}</strong>
          </template>
          <template slot-scope="{ row, index }" slot="action">
            <Button type="primary" size="small" style="margin-right: 5px">View</Button>
            <Button type="error" size="small">Delete</Button>
          </template>
        </Table>
      </Col>
      <Col span="12">
        <Form :model="formData" :label-width="80">
          <FormItem label="Input">
            <Input v-model="formData.input" placeholder="Enter something..."></Input>
          </FormItem>
          <FormItem label="Select">
            <Select v-model="formData.select">
              <Option value="beijing">New York</Option>
              <Option value="shanghai">London</Option>
              <Option value="shenzhen">Sydney</Option>
            </Select>
          </FormItem>
          <FormItem label="DatePicker">
            <Row>
              <Col span="11">
                <DatePicker type="date" placeholder="Select date" v-model="formData.date"></DatePicker>
              </Col>
              <Col span="2" style="text-align: center">-</Col>
              <Col span="11">
                <TimePicker type="time" placeholder="Select time" v-model="formData.time"></TimePicker>
              </Col>
            </Row>
          </FormItem>
          <FormItem label="Radio">
            <RadioGroup v-model="formData.radio">
              <Radio label="male">Male</Radio>
              <Radio label="female">Female</Radio>
            </RadioGroup>
          </FormItem>
          <FormItem label="Checkbox">
            <CheckboxGroup v-model="formData.checkbox">
              <Checkbox label="Eat"></Checkbox>
              <Checkbox label="Sleep"></Checkbox>
              <Checkbox label="Run"></Checkbox>
              <Checkbox label="Movie"></Checkbox>
            </CheckboxGroup>
          </FormItem>
          <FormItem label="Switch">
            <i-switch v-model="formData.switch" size="large">
              <span slot="open">On</span>
              <span slot="close">Off</span>
            </i-switch>
          </FormItem>
          <FormItem label="Slider">
            <Slider v-model="formData.slider" range></Slider>
          </FormItem>
          <FormItem label="Text">
            <Input v-model="formData.textarea" type="textarea" :autosize="{minRows: 2,maxRows: 5}"
                   placeholder="Enter something..."></Input>
          </FormItem>
          <FormItem>
            <Button type="primary">Submit</Button>
            <Button style="margin-left: 8px">Cancel</Button>
          </FormItem>
        </Form>
      </Col>
      <Col span="4">
        <Button type="primary" @click="modelShow = true">Display dialog box</Button>
        <Modal
          v-model="modelShow"
          title="Common Modal dialog box title">
          <Form :model="formData" :label-width="80">
            <FormItem label="Input">
              <Input v-model="formData.input" placeholder="Enter something..."></Input>
            </FormItem>
            <FormItem label="Select">
              <Select v-model="formData.select">
                <Option value="beijing">New York</Option>
                <Option value="shanghai">London</Option>
                <Option value="shenzhen">Sydney</Option>
              </Select>
            </FormItem>
            <FormItem label="DatePicker">
              <Row>
                <Col span="11">
                  <DatePicker type="date" placeholder="Select date" v-model="formData.date"></DatePicker>
                </Col>
                <Col span="2" style="text-align: center">-</Col>
                <Col span="11">
                  <TimePicker type="time" placeholder="Select time" v-model="formData.time"></TimePicker>
                </Col>
              </Row>
            </FormItem>
            <FormItem label="Radio">
              <RadioGroup v-model="formData.radio">
                <Radio label="male">Male</Radio>
                <Radio label="female">Female</Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="Checkbox">
              <CheckboxGroup v-model="formData.checkbox">
                <Checkbox label="Eat"></Checkbox>
                <Checkbox label="Sleep"></Checkbox>
                <Checkbox label="Run"></Checkbox>
                <Checkbox label="Movie"></Checkbox>
              </CheckboxGroup>
            </FormItem>
            <FormItem label="Switch">
              <i-switch v-model="formData.switch" size="large">
                <span slot="open">On</span>
                <span slot="close">Off</span>
              </i-switch>
            </FormItem>
            <FormItem label="Slider">
              <Slider v-model="formData.slider" range></Slider>
            </FormItem>
            <FormItem label="Text">
              <Input v-model="formData.textarea" type="textarea" :autosize="{minRows: 2,maxRows: 5}"
                     placeholder="Enter something..."></Input>
            </FormItem>
            <FormItem>
              <Button type="primary">Submit</Button>
              <Button style="margin-left: 8px">Cancel</Button>
            </FormItem>
          </Form>
        </Modal>
      </Col>
      <Col span="10">
        <Tree :render="renderContent" :data="treeData"></Tree>
      </Col>
      <Col span="10">
        <Timeline>
          <TimelineItem color="green">发布1.0版本</TimelineItem>
          <TimelineItem color="green">发布2.0版本</TimelineItem>
          <TimelineItem color="red">严重故障</TimelineItem>
          <TimelineItem color="blue">发布3.0版本</TimelineItem>
        </Timeline>
      </Col>
    </Row>
    <TablePage></TablePage>
  </div>
</template>

<script>
  import TablePage from '../common/TablePage'

  export default {
    name: 'Demo',
    components: {TablePage},
    comments: {TablePage},
    data () {
      return {
        tableColumns: [
          {
            title: 'Name',
            slot: 'name'
          },
          {
            title: 'Age',
            key: 'age'
          },
          {
            title: 'Address',
            key: 'address'
          },
          {
            title: 'Action',
            slot: 'action',
            width: 150,
            align: 'center'
          }
        ],
        tableData: [
          {
            name: 'John Brown',
            age: 18,
            address: 'New York No. 1 Lake Park',
            date: '2016-10-03'
          },
          {
            name: 'Jim Green',
            age: 24,
            address: 'London No. 1 Lake Park',
            date: '2016-10-01'
          },
          {
            name: 'Joe Black',
            age: 30,
            address: 'Sydney No. 1 Lake Park',
            date: '2016-10-02'
          }
        ],
        formData: {},
        modelShow: false,
        treeData: [
          {
            title: 'parent 1',
            expand: true,
            children: [
              {
                title: 'parent 1-1',
                expand: true,
                children: [
                  {
                    title: 'leaf 1-1-1'
                  },
                  {
                    title: 'leaf 1-1-2'
                  }
                ]
              },
              {
                title: 'parent 1-2',
                expand: true,
                children: [
                  {
                    title: 'leaf 1-2-1'
                  },
                  {
                    title: 'leaf 1-2-1'
                  }
                ]
              }
            ]
          }
        ]
      }
    },
    methods: {
      renderContent (h, {root, node, data}) {
        return h('span', {
          style: {
            display: 'inline-block',
            width: '100%'
          }
        }, [
          h('span', [
            h('Icon', {
              props: {
                type: 'ios-paper-outline'
              },
              style: {
                marginRight: '8px'
              }
            }),
            h('span', data.title)
          ]),
          h('span', {
            style: {
              display: 'inline-block',
              float: 'right',
              marginRight: '32px'
            }
          }, [
            h('Button', {
              props: Object.assign({}, this.buttonProps, {
                icon: 'ios-add'
              }),
              style: {
                marginRight: '8px'
              },
              on: {
                click: () => {
                  this.append(data)
                }
              }
            }),
            h('Button', {
              props: Object.assign({}, this.buttonProps, {
                icon: 'ios-remove'
              }),
              on: {
                click: () => {
                  this.remove(root, node, data)
                }
              }
            })
          ])
        ])
      }
    }
  }
</script>

<style scoped>

</style>